<template>
	<view class="client_detail">
		<i-scrollList margin="0 0 240rpx 0" @more="more" height="calc(100vh - 10rpx)" :total="pageData.total"
			:pageTotal="pageList.length">
			<i-card top="20rpx" padding="40rpx 32rpx">
				<view class="grid_list">
					<view class="grid_item">
						<text class="price">{{userData.payOrderAmount || 0}}</text>
						<text>门店订单（{{userData.payOrderCount|| 0}}）</text>
					</view>
					<view class="grid_item" v-if="storeInfo.merType != '1'">
						<text class="price">{{userData.merOrderAmount || 0}}</text>
						<text>开单订单（{{userData.merOrderCount || 0}}）</text>
					</view>
					<view class="grid_item">
						<text class="price">{{userData.platformOrderAmount || 0}}</text>
						<text>平台订单（{{userData.platformOrderCount || 0}}）</text>
					</view>
				</view>
			</i-card>
			<i-card top="20rpx" padding="26rpx 32rpx 12rpx 32rpx">
				<view class="user_title">
					<view>
						<text>客户资料</text>
					</view>
					<i-buttons color="#606A8A" @click="toEdit">编辑</i-buttons>
				</view>
				<i-orderItem v-if="storeInfo.merType != '1'" padding="24rpx 0" title="车牌号" :content="userData.vno || ''"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="姓名" :content="userData.userName"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="手机号" :content="userData.mobile"
					@click="telephone(userData.mobile)"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="性别"
					:content="!userData.sex ? '' : userData.sex === '0'? '男' : '女'"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="生日" :content="userData.birthDay"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="备注" :content="userData.remark"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="头像">
					<image class="userHeadUrl" :src="userData.userHeadUrl || '../../static/images/head2@2x.png'"
						mode=""></image>
				</i-orderItem>
				<i-orderItem padding="24rpx 0" title="昵称" :content="userData.nickName"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="会员等级" :content="vipLevel[userData.vip]"></i-orderItem>
				<i-orderItem padding="24rpx 0" title="优惠金余额" :border="false"
					:content="userData.accountAmount"></i-orderItem>
			</i-card>
			<view class="title" style="margin: 40rpx 0rpx 44rpx 32rpx;">
				消费记录（{{pageData.total}}）
			</view>
			<i-tab v-if="storeInfo.merType != '1'" @change="tabChange" bottom="1rpx solid #E6E6EB" :width="0" titleW="50%" type="slide"
				:list="[{title: '平台订单',id: 0},{title: '开单订单',id: 1}]"></i-tab>
			<i-card top="20rpx" v-for="item in pageList" :key="item.merOrderId">
				<view class="names">
					<view class="title_name">
						<view class="name">
							<text>{{item.isOnlinePay === 0 ? '在线支付' : '门店订单'}}</text>
							<i-tag v-if="active && item.isOnlinePay" bgColor="rgba(0, 122, 255, 0.1)" radius="4rpx"
								padding="2rpx 8rpx" color="#007AFF">工单</i-tag>
						</view>
						<text
							v-if="item.effTime && item.isUse === '1' && item.rechangeStatus === '10006002' && item.isOnlinePay">有效期至
							{{item.effTime}}</text>
					</view>
					<template v-if="active">
						<text class="status">
							{{item.orderStatus ?  '已作废' : '已结算'}}
						</text>
					</template>
					<template v-else>
						<view v-if="item.isOnlinePay">
							<text class="status" v-if="item.isUse === '1' && item.rechangeStatus === '10006002'">
								待核销
							</text>
							<text class="status" v-else>{{rechange_status_type[item.rechangeStatus]}}</text>
						</view>
						<view v-else>
							<text class="status">已完成</text>
						</view>
					</template>
				</view>
				<view class="shop_list">
					<view class="shop_item" v-for="(i,v) in item.childOrders || item?.detailList || []" :key="v"
						:style="{borderBottom :i === (item?.childOrders?.length - 1 || item?.detailList?.length -1) ? '' : '1rpx solid #f3f4f5'}">
						<view class="item_left">
							<view class="serviceName">
								<text>{{i.serviceName}}</text>
								<text class="namess">x {{i.goodsNum || i.nums}}</text>
							</view>
							<view class="item_sku" v-if="i.skuName">
								<text>{{i.skuName}}</text>
								<text>{{i.volume}}</text>
							</view>
							<view class="order_price">
								<i-price>{{i.realAmount || i.price}}</i-price>
								<view class="on_price" v-if="i.amount">
									¥{{i.amount}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<i-orderItem padding="12rpx 0" :border="false" title="订单号">
					<view class="number">
						<text class="numbs">{{item.merOrderId || item.id}}</text>
						<text @click="copyStr(item.merOrderId)" class="copy">复制</text>
					</view>
				</i-orderItem>
				<i-orderItem padding="12rpx 0" :border="false" title="下单时间" :content="item.createTime"></i-orderItem>
				<i-orderItem v-if="item.payChannel === 0" padding="12rpx 0" :border="false" title="结算方式"
					content="系统外支付(仅记录)"></i-orderItem>
				<i-orderItem padding="12rpx 0" :border="false" v-if="item.useTime" title="核销时间"
					:content="item.useTime"></i-orderItem>
				<i-orderItem v-if="item.amount" padding="12rpx 0" :border="false" title="商品原价"
					:content="'￥'+item.amount"></i-orderItem>
				<i-orderItem v-if="item.accountAmount" padding="12rpx 0" :border="false" title="优惠金抵扣"
					:content="'￥'+item.accountAmount"></i-orderItem>
				<i-orderItem v-if="item.realAmount" padding="12rpx 0 24rpx 0" title="实付金额"
					:content="'￥'+item.realAmount"></i-orderItem>
				<i-orderItem padding="24rpx 0 0 0" :border="false"
					v-if="item.finalPrice && (item.useTime || item.rechangeStatus === '10006002')" title="结算金额"
					cColor="#FF3D3D">
					<view class="price">￥ {{item.finalPrice}}</view>
				</i-orderItem>
				<i-orderItem padding="24rpx 0 0 0" :border="false" v-if="active" title="结算金额" cColor="#FF3D3D">
					<view class="price">￥ {{item.price}}</view>
				</i-orderItem>
			</i-card>
			<view style="height: 108rpx;"></view>
		</i-scrollList>
		<view class="flex_bottom" @click="gotoPage" v-if="storeInfo.merType != '1'">
			<image src="../../static/images/add@2x.png"></image>
			开单
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		computed,
		reactive,
		ref
	} from "vue";
	import {
		copyStr,
		telephone,
		showTost,
		navTo
	} from '../../utils/common'
	import {
		vipLevel,
		rechange_status_type
	} from '../../utils/enums'
	import {
		getStoreCustomerOrderList
	} from '../../api/store'
	import useStore from "../../stores/index";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import {
		customerDetail,
		orderQuery
	} from '../../api/business'



	const store = useStore()
	const storeInfo = computed(() => {
		return store.storeInfo
	})

	const userId = ref('')
	const id = ref('')
	const defaultNum = ref('')
	const type = ref(0)
	const active = ref(0)
	const skeleton = ref(true)
	const userData = ref<Record<string, any>>({})
	const pageList = ref<any[]>([])
	const pageData = reactive({
		"tyjPageNum": 1,
		"tyjPageSize": 15,
		total: 0
	})

	onLoad((option) => {
		userId.value = option.userId
		id.value = option.id
		type.value = Number(option.type)
		option.userId && getUserOrder()
	})

	onShow(() => {
		getDetail(userId.value, id.value)
	})
	const more = () => {
		pageData.tyjPageNum++
		if (active.value) {
			getPageData()
		} else {
			userId.value && getUserOrder()
		}
	}

	const gotoPage = () => {
		if (!userData.value.vno) {
			showTost('请添加车牌号后再进行开单', () => {
				navTo(`/pages/business/addCustom?id=${id.value}&userId=${userId.value || ''}&customerType=${userData.value.customerType}`, 'navigateTo')
			})
			return
		}
		navTo(`/pages/business/goBilling?vno=${userData.value.vno}&userName=${userData.value.userName || ''}&mobile=${userData.value.mobile || ''}&customerType=${userData.value.customerType}`, 'redirectTo')
	}

	const toEdit = () => {
		navTo(`/pages/business/addCustom?id=${id.value}&userId=${userId.value || ''}&customerType=${userData.value.customerType}`, 'navigateTo')
	}

	const getDetail = async (userId : string, id : string) => {
		const { data } = await customerDetail({
			id,
			userId
		})
		userData.value = data
	}

	const tabChange = (e : { id : number }) => {
		active.value = e.id
		pageData.tyjPageNum = 1
		pageData.total = 0
		pageList.value = []
		if (e.id) {
			getPageData()
		} else {
			userId.value && getUserOrder()
		}
	}
	const getPageData = async () => {
		const data = await orderQuery({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize,
			customerId: userData.value.id

		})
		pageList.value = pageList.value.concat(data.rows)
		pageData.total = data.total
	}


	const getUserOrder = async () => {
		skeleton.value = true
		try {
			const data = await getStoreCustomerOrderList({
				userId: userId.value,
				type: type.value,
				tyjPageNum: pageData.tyjPageNum,
				tyjPageSize: pageData.tyjPageSize,
				filterType: 0
			})
			pageList.value = pageList.value.concat(data.rows)
			pageData.total = data.total
		} catch (err) {

		}
		skeleton.value = false
	}
</script>

<style lang="scss" scoped>
	.client_detail {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.grid_list {
			@include flexR;

			.grid_item {
				width: 50%;
				@include flexC;
				@include dfont(26rpx);
				color: #A0A0AD;


			}
		}

		.user_title {
			@include flexRS;
			margin-bottom: 20rpx;

			view {
				@include flexR;

				text {
					@include titlefont;
					margin-right: 8rpx;
					margin-top: 4rpx;
				}
			}
		}

		.userHeadUrl {
			width: 60rpx;
			height: 60rpx;
			border-radius: 60rpx;
		}

		.tel_phone {
			@include flexR;
			@include dfont(28rpx);

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}

		.title {
			@include titlefont;
			@include flexR;
			margin-left: 32rpx;
			height: 30px;
		}

		.names {
			@include flexRS;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid $backColor;

			.title_name {
				width: 80%;
				@include flexC;

				.name {
					width: 98%;
					margin-bottom: 8rpx;

					text {
						@include titlefont(28rpx);
						margin-right: 8rpx;
					}
				}

				text {
					@include dfont(26rpx);
					color: #A0A0AD;
				}
			}



			.status {
				@include dfont;
				white-space: nowrap;
			}

		}

		.number {
			width: 70%;
			@include flexRS;
			@include dfont;

			.copy {
				width: 20%;
				text-align: right;
				color: #606A8A;
			}

			.numbs {
				width: 80%;
				@include overflow;
			}
		}

	}


	.price {
		@include dprice(36rpx);
		margin-bottom: 16rpx
	}

	.shop_list {
		.shop_item {
			@include flexRS;
			padding: 24rpx 0;
			margin-bottom: 12rpx;

			.item_left {
				@include flexC;
				width: 100%;

				.serviceName {
					@include dfont(28rpx);
					margin-bottom: 8rpx;
					@include flexRS;

					.namess {
						color: #A0A0AD;
					}

				}

				.item_sku {
					@include flexR;
					margin-bottom: 8rpx;

					text {
						@include dfont(26rpx);
						color: #A0A0AD;
						margin-right: 16rpx;
					}
				}
			}

			.item_r {
				@include dfont;
				color: #A0A0AD;
			}

			.order_price {
				@include flexR;
				margin-bottom: 20rpx;

				.on_price {
					@include dprice(26rpx);
					color: #A0A0AD;
					margin-left: 8rpx;
					// margin-bottom: 4rpx
					text-decoration: line-through;
				}
			}
		}
	}
</style>